<!-- 从业者-我的-考试详情 -->
<template>
	<view class="container">
		<!-- 考证标题 -->
		<!-- 步骤条 -->
		<u-steps :list="stepsList" :current="0" active-color="#03B8CD" mode="number">
		</u-steps>

		<!-- 基本信息 -->
		<view class="card" v-for="(exam,index) in examList" :key="exam.bkz_code">
			<!--左边证书图片 3：4 aspect-ratio: 3 / 4;-->
			<view class="card-left">
				<view class="job-image">
					<u-image width="72px" height="96px" :src="exam.image"></u-image>
				</view>
			</view>
			<view class="card-right">
				<view class="section-title">{{exam.kzinfo.bkz_name}}</view>
				<view class="info-item">
					<text class="info-label">报考城市：</text>
					<text class="info-value">{{exam.kzinfo.bkz_bkcs}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">报考等级：</text>
					<text class="info-value">{{exam.kzl_levelname}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">鉴定分类：</text>
					<text class="info-value">{{exam.ukz_jdfl}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">考试时间：</text>
					<text class="info-value">{{exam.kzinfo.bkz_ksdate}}</text>
				</view>
			</view>
		</view>

		<!-- 是否参加培训 -->
		<view class="radio-exam">
			<u-checkbox-group>
				<u-checkbox v-model="flInfo.kzlfortrain" :disabled="false" shape="circle">参加培训</u-checkbox>
			</u-checkbox-group>
		</view>
		<!--赠送福利 -->
		<view class="radio-exam">
			<view class="sub-title">赠送福利</view>
			<view class="benefit-item">
				<text>1. 在线课程-{{flInfo.selectedflkc}}</text>
			</view>
			<view class="benefit-item">
				<text>2. 练习题库-{{flInfo.selectedfltk}}</text>
			</view>
			<view class="valid-date">
				<!-- <text>有效期：2025-05-05 至 2025-06-20</text> -->
			</view>
		</view>

		<!-- 分割线 -->
		<u-line color="#eee" margin="20rpx 0"></u-line>

		<!-- 考试成绩 -->
		<view class="card-grade">
			<view class="card-result">
				<view class="section-title">考试成绩</view>
				<view class="result-status">
					<u-tag text="通过" type="success" size="medium"></u-tag>
				</view>
			</view>
			<view class="score-container">
				<view class="score-item">
					<text class="score-value">90</text>
					<text class="score-label">理论成绩</text>
				</view>
				<view class="score-item">
					<text class="score-value">90</text>
					<text class="score-label">实操成绩</text>
				</view>
			</view>
		</view>




		<!-- 分割线 -->
		<u-line color="#eee" margin="20rpx 0"></u-line>

		<!-- 证书信息 -->
		<view class="card-section">
			<view class="section-title">证书</view>
			<view class="certificate-status">
				<text>待寄出</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 步骤条
				stepsList: [{
						name: "报考中"
					},
					{
						name: "审核中"
					},
					{
						name: "待考中"
					},
					{
						name: "等待成绩"
					},
					{
						name: "已出成绩"
					},
				],
				// 报考信息
				examList: [{
					id: 1,
					title: '考试名称',
					city: '福州',
					level: '四级',
					image: '/static/nav/nav-classify.png',
					endTime: '2025-05-23',
					status: 'SigningUp',
					classify: '初次鉴定'
				}],
				// 实际项目中这些数据应从API获取
				examInfo: {
					city: '福州',
					level: '三级',
					type: '初次鉴定',
					time: '6月20日 00:00',
					benefits: [
						'在线课程-XXXXXXXXXX课程名称',
						'练习题库-XXXXXX名称'
					],
					validDate: '2025-05-05 至 2025-06-20',
					theoryScore: 90,
					practiceScore: 90,
					passed: true,
					certificateStatus: '待寄出'
				},
				flInfo: {},
				bkzcode: '', /////存储考证code
				kzlcode: '' //报名考证code
			}
		},
		onLoad(options) {
			// options中微信小程序需要转码才能取出值
			this.bkzcode = decodeURIComponent(options.bkzcode || '');
			this.kzlcode = decodeURIComponent(options.kzlcode || '');
			
		},
		onShow() {
			setTimeout(() => {
				this.getbkzDetails()
			},1000)
			
		},
		methods: {			
			getbkzDetails() {
				console.log('cykzbm-1：', this.kzlcode,this.bkzcode)
				this.$u.api.querykzbm({
					"usercode": uni.getStorageSync('usercode'),  ///#从业者用户code
				}).then(res => {
					console.log('cykzbm：', res)
					let baseinfo = res.data.base_info
					this.examList = []					
					for(let i=0; i<baseinfo.length; i++) {
						
						if(this.kzlcode === baseinfo[i].kzl_code) {		
							this.examList.push(baseinfo[i]) 
						}
					}
					// 转化考证信息
					this.returnExamInfo()
					
				})				
			},
			// 转化考证信息
			returnExamInfo() {
				// 取得考试报名等级的code
				let kzlcode = this.examList[0].kzl_code;
				this.examInfo = {}
				for(var i=0; i< this.examList[0].kzinfo.bkz_levels.length; i++) {
					if(kzlcode === this.examList[0].kzinfo.bkz_levels[i].kzl_code) {
						 this.examInfo = this.examList[0].kzinfo.bkz_levels[i]						
					}
				}
				// 取得报名等级的考证课程与考题；				
				// 取得等级中是否培训
				// 取得福利课程与题
				this.flInfo = {}
				this.flInfo = {
					kzlfortrain :   String(this.examInfo.kzl_fortrain) == "1" ? true : false,
					selectedflkc :  this.examInfo.kcfl.map(item => item.kzl_flkc?.bc_name).filter(Boolean).join('、'),
					selectedfltk :  this.examInfo.tkfl.map(item => item.kzl_fltk?.btk_name).filter(Boolean).join('、')
				} 
				console.log('报名后转化后：',this.flInfo)
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.header {
		padding: 20rpx 0;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	// 是否培训与赠送福利
	.radio-exam {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin: 20rpx 0;

		.radio {
			font-size: 18px;
		}

	}



	// 报名信息
	.card {
		display: flex;
		justify-content: flex-start;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin: 20rpx 0;
}

		.job-image {
			margin-right: 20px;
		}

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			// margin-bottom: 20rpx;
			color: #333;
		}

		.sub-title {
			font-size: 28rpx;
			font-weight: bold;
			margin: 15rpx 0;
			color: #666;
		}

		.info-item {
			display: flex;
			// margin-bottom: 15rpx;
			font-size: 26rpx;

			.info-label {
				color: #666;
				width: 150rpx;
			}

			.info-value {
				color: #333;
				flex: 1;
			}
		}

		.benefit-item {
			font-size: 26rpx;
			color: #333;
			margin-bottom: 10rpx;
			padding-left: 20rpx;
		}

		.valid-date {
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
			// text-align: right;
		}





	// 考试成绩
	.card-grade {
		font-size: 32rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin: 20rpx 0;
		
		.card-result {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;
		
			/deep/ .u-tag {
				height: 32rpx;
				line-height: 32rpx;
		
			}
		}
		
		.score-container {
			display: flex;
			justify-content: space-around;
			margin: 30rpx 0;
		
			.score-item {
				display: flex;
				flex-direction: column;
				align-items: center;
		
				.score-value {
					font-size: 48rpx;
					font-weight: bold;
					color: #03B8CD;
					margin-bottom: 10rpx;
				}
		
				.score-label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}		
	}
	
	// 证书
	.card-section {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin: 20rpx 0;
		
		.certificate-status {
			color: #666;
			text-align: center;
			// padding: 15rpx 0;
		}
	}

</style>